<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyunlong
 * @LastEditTime: 2022-01-10 10:22:54
-->
<template>
  <div ref="bottom4_container" style="height: 75%"></div>
</template>
<script>
import { Column } from "@antv/g2plot";
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const data = [
        {
          year: "1991",
          value: 3,
          type: "自行车",
        },
        {
          year: "1992",
          value: 4,
          type: "自行车",
        },
        {
          year: "1993",
          value: 3.5,
          type: "自行车",
        },
        {
          year: "1994",
          value: 5,
          type: "自行车",
        },
        {
          year: "1995",
          value: 4.9,
          type: "自行车",
        },
        {
          year: "1996",
          value: 6,
          type: "自行车",
        },
        {
          year: "1997",
          value: 7,
          type: "自行车",
        },
        {
          year: "1998",
          value: 9,
          type: "自行车",
        },
        {
          year: "1999",
          value: 13,
          type: "自行车",
        },
        {
          year: "1991",
          value: 3,
          type: "电动车",
        },
        {
          year: "1992",
          value: 4,
          type: "电动车",
        },
        {
          year: "1993",
          value: 3.5,
          type: "电动车",
        },
        {
          year: "1994",
          value: 5,
          type: "电动车",
        },
        {
          year: "1995",
          value: 4.9,
          type: "电动车",
        },
        {
          year: "1996",
          value: 6,
          type: "电动车",
        },
        {
          year: "1997",
          value: 7,
          type: "电动车",
        },
        {
          year: "1998",
          value: 9,
          type: "电动车",
        },
        {
          year: "1999",
          value: 13,
          type: "电动车",
        },
      ];
      const stackedColumnPlot = new Column(this.$refs.bottom4_container, {
        data,
        isStack: true,
        xField: "year",
        yField: "value",
        seriesField: "type",
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'bottom', 'middle' // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: "interval-adjust-position" }, // 数据标签防遮挡
            { type: "interval-hide-overlap" }, // 数据标签文颜色自动调整
            { type: "adjust-color" },
          ],
        },
      });

      stackedColumnPlot.render();
    },
  },
};
</script>